<template>
  <div id="app">
    <el-card style="background-color: #ffffff" class="largeCard">
      <div slot="header">
        <el-upload
          ref="uploadPic"
          class="upload-demo"
          :action="uploadMate"
          :headers="uploadHeader"
          multiple
          :on-success="handleAvatarSuccess"
        >
          <el-button size="mini" type="primary">点击上传素材</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>

      <el-row :span="30" :gutter="20">
        <el-col style="width:20%; margin-bottom:20px" v-for="item in list" :key="item.id" >
          
          <el-card :body-style="{ padding: '0px' }">
            <div class="time">创建时间:{{ item.createTime }}</div>
            
            <div style="padding: 20px;">
              <img :src="item.ossUrl" class="image">
              <el-button type="danger" size="mini" @click="del(item.id)" class="button">删除</el-button>
              <div style="clear:both"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>


  </div>
</template>

<script>
import mixin from "@/mixins/index"
import {findMaterialByPage,delMaterial,uploadFileOssSave} from '@/api/content/material';
export default {
  data() {
    return {
      list:[],
    }
  },
  mixins:[mixin],
  created(){
    this.getList()
    
  },
  methods: {
    //上传图片成功后的回调函数
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.$refs.uploadPic.clearFiles()
      this.getList()
    },
    //删除素材数据
    del(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMaterial(id).then(res=>{
          if(res.success){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          }else{
            this.$message.error("删除失败")
          }
          
        })
        
      })
    },
    //获取素材数据
    getList(){
        findMaterialByPage(this.page.currentPage,this.page.size).then(res=>{
        if(res.success){
          this.list = res.data.rows
          this.page.total = res.data.total
        }
        
      })
    },
    //每页显示几条触发的钩子函数
    handleSizeChange(val){
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    //点击页数时触发的钩子函数
    handleCurrentChange(val){
      this.page.currentPage = val
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.main-container{
  background-color: #f0f2f5;
}
  .app-main{
  margin: 30px;
}

</style>

<style lang="scss" scoped>
@import "@/styles/myScss.scss";
#app {
  background-color: #f0f2f5;
}

.image{
  width: 100%;
  height: 250px;
}
.time{
  font-size: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
}
.button{
  margin-top: 20px;
  float: right;
}
</style>

